<template>
    <div class="login-container">
        <div class="login-container-item">
            <div class="login-container-item-img">
                <img :src="loginImage" alt="" />
            </div>
        </div>
        <div class="login-container-item login-container-item-right">
            <div class="login-form">
                <div class="login-form-title">
                    <template v-if="hasLogo">
                        <div class="login-form-title-logo">
                            <img :src="setting?.loginLogo" alt="" />
                        </div>
                        <div class="login-form-title-desc" v-if="setting?.loginDesc">{{ setting?.loginDesc }}</div>
                    </template>
                    <div class="login-form-title-text" v-else>{{ setting?.title }}</div>
                </div>
                <n-form ref="formRef" label-placement="left" size="large" :model="data" :rules="rules">
                    <n-form-item path="username">
                        <n-input v-model:value="data.username" placeholder="请输入用户名">
                            <template #prefix>
                                <n-icon size="18" color="#808695">
                                    <UserOutlined />
                                </n-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item path="password">
                        <n-input v-model:value="data.password" type="password" showPasswordOn="click" placeholder="请输入密码">
                            <template #prefix>
                                <n-icon size="18" color="#808695">
                                    <LockOutlined />
                                </n-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item>
                        <n-button type="primary" @click="handleLogin" size="large" :loading="loading" block> 登录 </n-button>
                    </n-form-item>
                </n-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { doLogin } from "@/authorization/useAuthorization"
import { useAppStore } from "@/store/modules/app"
import { isEmpty } from "@/utils"
import { UserOutlined, LockOutlined } from "@vicons/antd"
import type { FormInst } from "naive-ui"

const appStore = useAppStore()
const { setting } = storeToRefs(appStore)
const hasLogo = computed(() => {
    return !isEmpty(setting.value?.loginLogo)
})
const loginImage = "https://pro.naiveadmin.com/assets/login-bg-BTLOwUOi.svg"

const loading = ref<boolean>(false)
const formRef = ref<FormInst | null>(null)
const data = reactive({
    username: "",
    password: "",
    isCaptcha: true
})

const rules = {
    username: { required: true, message: "请输入用户名", trigger: "blur" },
    password: { required: true, message: "请输入密码", trigger: "blur" }
}

const handleLogin = (e: MouseEvent) => {
    e.preventDefault()
    loading.value = true
    formRef.value
        ?.validate(async errors => {
            if (!errors) {
                const { username, password } = data
                await doLogin(username, password)
                loading.value = false
            }
        })
        .catch(() => (loading.value = false))
}
</script>

<style lang="less" scoped>
.login-container {
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap;
    width: 100%;
    height: 100vh;
    justify-content: center;

    &-item {
        box-sizing: border-box;
        margin: 0px;
        flex-direction: row;
        flex-basis: 100%;
        flex-grow: 0;
        max-width: 100%;
        background: rgb(45, 140, 240);

        &-right {
            background: rgb(255, 255, 255);
            box-sizing: border-box;
            flex-flow: wrap;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    &-item-img {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        img {
            width: 70%;
            display: inline-block;
            margin: 0px auto;
        }
    }
}

.login-form {
    flex-basis: 60%;
    flex-grow: 0;
    max-width: 60%;

    &-title {
        text-align: center;
        margin: 20px 0px;

        &-logo {
            text-align: center;

            img {
                width: 100%;
                margin: 0px auto;
            }
        }

        &-desc {
            font-size: 14px;
            color: rgb(128, 134, 149);
        }

        &-text {
            font-size: 28px;
            font-weight: 700;
            color: rgb(52, 73, 94);
        }
    }
}

@media (min-width: 600px) {
    .login-container-item {
        flex-basis: 100%;
        flex-grow: 0;
        max-width: 100%;
    }

    .login-form {
        flex-basis: 90%;
        flex-grow: 0;
        max-width: 90%;
    }
}

@media (min-width: 1200px) {
    .login-container-item {
        flex-basis: 50%;
        flex-grow: 0;
        max-width: 50%;
    }

    .login-form {
        flex-basis: 50%;
        flex-grow: 0;
        max-width: 50%;
    }
}
</style>
